<template>
  <el-container class="home-content">
    <el-header class="home-content-header">
      <div style="height:100%;display:flex;justify-content:space-between;align-items:center;">
        <div style="flex-shrink:0;color:#ffffff;font-size:30px;font-weight:bold;">济源市义务教育学校招生报名平台</div>
        <div style="display:flex;flex-shrink:0;color:#ffffff;font-size:14px;">
          <div style="margin-right:16px;">登陆用户名</div>
          <div style="margin-right:16px;cursor:pointer">修改密码</div>
          <div style="cursor:pointer">退出登陆</div>
        </div>
      </div>
    </el-header>
    <el-container class="home-content-subject">
      <el-aside class="home-content-aside">
        <el-menu
          :default-active="defaultActive"
          class="home-content-aside-menu"
          :unique-opened="true"
          @open="handleOpen"
          @close="handleClose"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-submenu v-for="item in menus" v-bind:key="item.path" v-if="item.children.length>0" :index="item.path">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{item.name}}</span>
            </template>
            <el-menu-item v-for="ite in item.children" v-bind:key="ite.path" :index="ite.path">{{ite.name}}</el-menu-item>
          </el-submenu>

          <el-menu-item v-if="item.children.length==0" v-bind:key="item.path" v-for="item in menus" :index="item.path">
            <i class="el-icon-menu"></i>
            <span slot="title">{{item.name}}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main class="home-content-main">
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>

export default {
  name: "HelloWorld",
  data() {
    return {
      defaultActive:'',
      menus: [
        {
          name: "导航一",
          path: "home1",
          children: [
            { name: "导航一1", path: "one1" },
            { name: "导航一2", path: "two1" }
          ]
        },
        {
          name: "导航2",
          path: "home2",
          children: [
            { name: "导航21", path: "one2" },
            { name: "导航22", path: "two2" }
          ]
        },
        {
          name: "导航3",
          path: "home3",
          children: []
        },
        {
          name: "导航3",
          path: "home3",
          children: []
        },
        {
          name: "导航3",
          path: "home3",
          children: []
        },
        {
          name: "导航3",
          path: "home3",
          children: []
        },
        {
          name: "导航3",
          path: "home3",
          children: []
        },
        {
          name: "导航3",
          path: "home3",
          children: []
        },
        {
          name: "导航3",
          path: "home3",
          children: []
        }
      ]
    };
  },
  // 
  mounted() {
    // f5刷新时不变按钮颜色
    console.log(this.$route.path)
    let path=this.$route.path.split('/')
    path=path[path.length-1]
    console.log(path)
    this.defaultActive=path
   
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSelect(index, indexPath) {
      console.log(index);
      console.log(indexPath);
      let path='/'+indexPath.join('/')
       this.$router.push({ path:path });
    }
  },
  // f5刷新时不会触发watch,在一个按钮多次触发也不会触发watch
  watch: {
    $route(to, from) {
      console.log('监听路由变化')
      console.log(to);
    let path=to.path.split('/')
    path=path[path.length-1]
    console.log(path)
    this.defaultActive=path
    },
    deep: true
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='scss'>
.home-content {
  height: 100%;
  min-width: 1050px;
  .home-content-header {
    width: 100%;
    background: rgb(125, 177, 216);
    position: fixed;
    top: 0;
    height: 80px !important;
    z-index: 3;
  }
  .home-content-subject {
    box-sizing:border-box;
     padding-top: 80px;
  }
  .home-content-aside {
    // background: orange;
    width: 200px !important;
    .home-content-aside-menu{
      height: 100%;
      border:none;
      width:200px !important;
    }
  }
  .home-content-main {
    height: 100%;
    background: rgba(125, 177, 216,0.3);
  }
}
</style>
